<template>
    <a-spin :spinning="spinning" tip="更新中...">
        <a-page-header style="align-items:bottom" :title="author.author_name"
            :sub-title="'共收录该作者' + author.workList.length + '篇论文'" @back="$router.go(-1)" />
        <a-row :gutter="[16, 16]">
            <a-col :span="22" :offset="1">
                <a-col :span="4">
                    <a-divider />
                    <a-typography-title :level="4">作品列表</a-typography-title>
                </a-col>
                <a-row>
                    <a-col :span="24">
                        <!-- 列表展示该作者过往发表的所有论文，该列表尚未启用分页 -->
                        <a-list item-layout="vertical" size="large" :data-source="author.workList">
                            <template #renderItem="{ item }">
                                <a-list-item key="item.title">
                                    <a-list-item-meta :description="item.categories">
                                        <template #title>
                                            <!-- 打开抽屉展示论文详细信息 -->
                                            <span style="cursor: pointer;" @click="showDrawer(item.paper_id)">{{ item.title
                                            }}</span>&nbsp;
                                            <div v-if="item.favorite" style="display:inline">
                                                <a-tooltip title="取消收藏">
                                                    <star-filled key="star_fill" @click="handleFavorite(item.paper_id)" />
                                                </a-tooltip>
                                            </div>
                                            <div v-else style="display:inline">
                                                <a-tooltip title="收藏">
                                                    <star-outlined key="star_empty" tooltip="收藏"
                                                        @click="handleFavorite(item.paper_id)" />
                                                </a-tooltip>
                                            </div>
                                        </template>
                                        <template #description>
                                            <!-- 作者列表，可跳转至作者界面 -->
                                            <template v-for="{ author_id, author_name } in item.authors" :key="author_id">
                                                <a @click="$router.push('/author_profile?author_id=' + author_id)">{{
                                                    author_name }}</a>.&nbsp;
                                            </template>
                                            {{ item.update_date }}
                                        </template>
                                    </a-list-item-meta>
                                </a-list-item>
                            </template>
                        </a-list>
                    </a-col>
                </a-row>
                <a-divider />
                <a-row :gutter="[16, 16]">
                    <a-col :span="4">
                        <a-typography-title :level="4">相关推荐</a-typography-title>
                    </a-col>
                </a-row>
                <a-row>
                    <a-col :span="24">
                        <!-- 列表展示根据作者推荐论文结果，该列表尚未启用分页 -->
                        <a-list item-layout="vertical" size="large" :data-source="paperList">
                            <template #renderItem="{ item }">
                                <a-list-item key="item.title">
                                    <a-list-item-meta :description="item.categories">
                                        <template #title>
                                            <!-- 打开抽屉展示论文详细信息 -->
                                            <span style="cursor: pointer;" @click="showDrawer(item.paper_id)">{{ item.title
                                            }}</span>&nbsp;
                                            <div v-if="item.favorite" style="display:inline">
                                                <a-tooltip title="取消收藏">
                                                    <star-filled key="star_fill" @click="handleFavorite(item.paper_id)" />
                                                </a-tooltip>
                                            </div>
                                            <div v-else style="display:inline">
                                                <a-tooltip title="收藏">
                                                    <star-outlined key="star_empty" tooltip="收藏"
                                                        @click="handleFavorite(item.paper_id)" />
                                                </a-tooltip>
                                            </div>
                                        </template>
                                        <template #description>
                                            <!-- 作者列表，可跳转至作者界面 -->
                                            <template v-for="{ author_id, author_name } in item.authors" :key="author_id">
                                                <a @click="$router.push('/author_profile?author_id=' + author_id)">{{
                                                    author_name }}</a>.&nbsp;
                                            </template>
                                            {{ item.update_date }}
                                        </template>
                                    </a-list-item-meta>
                                </a-list-item>
                            </template>
                        </a-list>
                    </a-col>
                </a-row>
                <a-drawer width="800" placement="right" :closable="false" :visible="visible" @close="onClose">
                    <div style="font-size:12px; font-style:italic">[Submitted on&nbsp;{{ paper.update_date }}]</div>
                    <div style="font-size:16px; margin-bottom: 8px; font-weight:bold">
                        <span>{{ paper.title }}</span>
                        <a-tooltip title="查看论文">
                            <FilePdfOutlined key="pdf" @click="handlePDF(paper.url)" />
                        </a-tooltip>
                    </div>
                    <!-- 作者列表，可跳转至作者界面 -->
                    <template v-for="{ author_id, author_name } in paper.authors" :key="author_id">
                        <a @click="$router.push('/author_profile' + author_id)">{{ author_name }}</a>.&nbsp;
                    </template>
                    <p>{{ paper.paper_abstract }}</p>
                    <a-row>
                        <a-col :span="24">
                            <div v-if="paper.comments = ''">
                                <a-typography-text>Comments:</a-typography-text>&nbsp;
                                <a-typography-text type="secondary">{{ paper.comments }}</a-typography-text>
                            </div>
                        </a-col>
                    </a-row>
                    <a-row>
                        <a-col :span="24">
                            <a-tag v-for="category in paper.categories" :key="category" color="blue">{{ category }}</a-tag>
                        </a-col>
                    </a-row>
                </a-drawer>
            </a-col>
        </a-row>
    </a-spin>
</template>

<script>
import { defineComponent, onMounted, reactive, toRefs, ref } from 'vue'
import { StarOutlined, StarFilled, FilePdfOutlined } from '@ant-design/icons-vue';
import { author } from '@/api/post/author'
import { author_rec } from '@/api/post/author_rec'
import { favorite } from '@/api/post/favorite'
import { paper_detail } from '@/api/post/paper_detail'
import { assign } from 'lodash-es'
import { useRoute, useRouter, onBeforeRouteUpdate } from 'vue-router'
import dom_map from '@/constant/dom_map'
import globalVariable from '@/components/mathJax/globalVariable'

export default defineComponent({
    components: {
        StarOutlined,
        StarFilled,
        FilePdfOutlined
    },
    setup() {
        const router = useRouter()
        const state = reactive({
            visible: false,
            author_id: NaN,
            paperList: [],
            author: {
                author_name: '',
                workList: []
            },
            paper: {
                title: '',
                authors: [],
                update_date: '',
                favorite: false,
                paper_abstract: '',
                comments: '',
                categories: [],
                url: ''
            }
            // pagination
        })
        const spinning = ref(false);
        async function update() {
            await author(parseInt(state.author_id)).then((response) => {
                if (response.data.status.code === 0) {
                    state.author.author_name = response.data.data.author.author_name,
                        state.author.workList = response.data.data.author.workList
                }
            })
            await author_rec(parseInt(state.author_id)).then((response) => {
                if (response.data.status.code === 0) {
                    state.paperList = response.data.data.paperList
                }
            })
            await checkLaTex()
            spinning.value = false
        }

        async function handleFavorite(paper_id) {
            // spinning.value = true
            state.paperList = []
            await favorite(paper_id)
            setTimeout(() => { }, 100);
            update()
        }

        const route = useRoute()
        onMounted(() => {
            // 取参数
            state.author_id = parseInt(route.query.author_id)
            // 参数格式不正确
            if (isNaN(state.author_id)) {
                router.push('/homepage')
            }
            // spinning.value = true
            update()
        })

        onBeforeRouteUpdate(to => {
            state.author_id = to.query.author_id
            // spinning.value = true
            update()
        })

        async function showDrawer(paper_id) {
            await paper_detail(paper_id).then((response) => {
                assign(state.paper, response.data.data.paper)
            })
            await checkLaTex()
            state.visible = true;
        };

        const onClose = () => {
            state.visible = false;
        };

        const checkLaTex = () => {
            // 同favorite.vue
            globalVariable.initMathjaxConfig();
            globalVariable.MathQueue();
            globalVariable.MathQueue();
        }

        return {
            ...toRefs(state),
            spinning,
            handleFavorite,
            showDrawer,
            onClose,
            dom_map,
        };
    },
})
</script>

<style scoped>
span:hover {
    color: #1890ff;
    transition: 0.6s ease-in;
}
</style>
